<template>
   <div>
       <el-card shadow="hover" class="mb-[10px]">
           <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
               <el-form-item label="操作地址" prop="operIp">
                   <el-input
                           v-model="queryParams.operIp"
                           placeholder="请输入操作地址"
                           clearable
                           style="width: 240px;"
                           @keyup.enter="handleQuery"
                   />
               </el-form-item>
               <el-form-item label="系统模块" prop="title">
                   <el-input
                           v-model="queryParams.title"
                           placeholder="请输入系统模块"
                           clearable
                           style="width: 240px;"
                           @keyup.enter="handleQuery"
                   />
               </el-form-item>
               <el-form-item label="操作人员" prop="operName">
                   <el-input
                           v-model="queryParams.operName"
                           placeholder="请输入操作人员"
                           clearable
                           style="width: 240px;"
                           @keyup.enter="handleQuery"
                   />
               </el-form-item>
               <el-form-item label="类型" prop="businessType">
                   <el-select
                           v-model="queryParams.businessType"
                           placeholder="操作类型"
                           clearable
                           style="width: 240px"
                   >
                       <el-option
                               v-for="dict in sys_oper_type"
                               :key="dict.value"
                               :label="dict.label"
                               :value="dict.value"
                       />
                   </el-select>
               </el-form-item>
               <el-form-item label="状态" prop="status">
                   <el-select
                           v-model="queryParams.status"
                           placeholder="操作状态"
                           clearable
                           style="width: 240px"
                   >
                       <el-option
                               v-for="dict in sys_common_status"
                               :key="dict.value"
                               :label="dict.label"
                               :value="dict.value"
                       />
                   </el-select>
               </el-form-item>
               <el-form-item label="操作时间" style="width: 308px">
                   <el-date-picker
                           v-model="dateRange"
                           value-format="YYYY-MM-DD HH:mm:ss"
                           type="daterange"
                           range-separator="-"
                           start-placeholder="开始日期"
                           end-placeholder="结束日期"
                           :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                   ></el-date-picker>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                   <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               </el-form-item>
           </el-form>
       </el-card>
       
       <el-card shadow="hover">
           <template #header>
               <el-row :gutter="10" class="mb8">
                   <el-col :span="1.5">
                       <el-button
                               type="danger"
                               plain
                               icon="Delete"
                               :disabled="multiple"
                               @click="handleDelete"
                               v-hasPermi="['delete:/monitor/operlog/*']"
                       >删除</el-button>
                   </el-col>
                   <el-col :span="1.5">
                       <el-button
                               type="danger"
                               plain
                               icon="Delete"
                               @click="handleClean"
                               v-hasPermi="['delete:/monitor/operlog/clean']"
                       >清空</el-button>
                   </el-col>
                   <el-col :span="1.5">
                       <el-button
                               type="warning"
                               plain
                               icon="Download"
                               @click="handleExport"
                               v-hasPermi="['post:monitor/operlog/export']"
                       >导出</el-button>
                   </el-col>
                   <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
               </el-row>
               <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
                   <el-table-column type="selection" width="50" align="center" />
                   <el-table-column label="日志编号" align="center" prop="operId" />
                   <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
                   <el-table-column label="操作类型" align="center" prop="businessType">
                       <template #default="scope">
                           <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
                       </template>
                   </el-table-column>
                   <el-table-column label="请求方式" align="center" prop="requestMethod" />
                   <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
                   <el-table-column label="部门" align="center" prop="deptName" width="130" :show-overflow-tooltip="true" />
                   <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
                   <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
                   <el-table-column label="操作状态" align="center" prop="status">
                       <template #default="scope">
                           <dict-tag :options="sys_common_status" :value="scope.row.status" />
                       </template>
                   </el-table-column>
                   <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
                       <template #default="scope">
                           <span>{{ parseTime(scope.row.operTime) }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
                       <template #default="scope">
                           <span>{{ scope.row.costTime }}毫秒</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                       <template #default="scope">
                           <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['get:monitor/operlog/list']">详细</el-button>
                       </template>
                   </el-table-column>
               </el-table>
               <pagination
                       v-show="total > 0"
                       :total="total"
                       v-model:page="queryParams.pageNum"
                       v-model:limit="queryParams.pageSize"
                       @pagination="getList"
               />
           </template>
       </el-card>
     
      <!-- 操作日志详细 -->
      <el-dialog title="操作日志详细" v-model="open" width="1000px" append-to-body fullscreen>
          <el-descriptions border class="mb-[10px]" :column="4" >
              <el-descriptions-item label="登录信息">{{ form.operName }} / {{form.deptName}}</el-descriptions-item>
              <el-descriptions-item label="IP地址">{{ form.operIp }}</el-descriptions-item>
              <el-descriptions-item label="地点">{{ form.operLocation }}</el-descriptions-item>
              <el-descriptions-item label="操作系统">{{ form.os }}</el-descriptions-item>
              <el-descriptions-item label="浏览器类型">{{ form.browser }}</el-descriptions-item>
              <el-descriptions-item label="请求方法">{{ form.requestMethod }}</el-descriptions-item>
              <el-descriptions-item label="请求接口">
                  {{form.operUrl }}
                  <svg-icon icon-class="el-CopyDocument" class="inline-block ml-1 text-sky-500 cursor-pointer" v-copy:click="form.operUrl"/>
              </el-descriptions-item>
              <el-descriptions-item label="操作模块">{{ form.title }} / {{ typeFormat(form) }}</el-descriptions-item>
              <el-descriptions-item label="操作方法">
                  {{ form.method }}
                  <svg-icon icon-class="el-CopyDocument" class="inline-block ml-1 text-sky-500 cursor-pointer" v-copy:click="form.method"/>
              </el-descriptions-item>
              <el-descriptions-item label="操作状态">{{ form.status === 0 ? '正常' : '失败' }}</el-descriptions-item>
              <el-descriptions-item label="消耗时间">{{ form.costTime }}毫秒</el-descriptions-item>
              <el-descriptions-item label="操作时间">{{ parseTime(form.operTime) }}</el-descriptions-item>
              <el-descriptions-item label="异常信息" v-if="form.status === 1">{{ form.errorMsg }}</el-descriptions-item>
          </el-descriptions>

          <el-tabs :modelValue="'响应数据'" type="border-card" class="mt-4">
              <el-tab-pane
                      v-for="(item, index) in requestInfo"
                      :key="index"
                      :name="item.title"
                      :label="item.title">
                  <el-scrollbar max-height="calc(100vh - 240px)">
                      <json-viewer :value="item.data" copyable boxed sort theme="light" />
                  </el-scrollbar>
              </el-tab-pane>
          </el-tabs>
          
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="open = false">关 闭</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="Operlog">
import {JsonViewer} from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css"

import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";

const { sys_oper_type, sys_common_status } = useDicts("sys_oper_type","sys_common_status");
const {msgSuccess, confirm} = useModal()

const queryRef = ref()
const operlogRef = ref()

const operlogList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const defaultSort = ref({ prop: "operTime", order: "descending" });

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    operIp: undefined,
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: undefined
  }
});

const { queryParams, form } = toRefs(data);

const requestInfo = computed(() => {
    return [
        {
            title: "响应数据",
            data: JSON.parse(form.value.jsonResult)
        },
        {
            title: "请求参数",
            data: JSON.parse(form.value.operParam)
        }
    ]
})

/** 查询登录日志 */
function getList() {
  loading.value = true;
  list(addDateRange(queryParams.value, dateRange.value)).then(response => {
    operlogList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return selectDictLabel(sys_oper_type.value, row.businessType);
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  resetForm(queryRef.value);
  queryParams.value.pageNum = 1;
    operlogRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.operId);
  multiple.value = !selection.length;
}
/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop;
  queryParams.value.isAsc = column.order;
  getList();
}
/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
}
/** 删除按钮操作 */
function handleDelete(row) {
  const operIds = row.operId || ids.value;
  confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
    return delOperlog(operIds);
  }).then(() => {
    getList();
    msgSuccess("删除成功");
  }).catch(() => {});
}
/** 清空按钮操作 */
function handleClean() {
  confirm("是否确认清空所有操作日志数据项?").then(function () {
    return cleanOperlog();
  }).then(() => {
    getList();
    msgSuccess("清空成功");
  }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  useDownload().downloadByApi("monitor/operlog/export",{
    ...queryParams.value,
  }, `config_${new Date().getTime()}.xlsx`);
}

getList();
</script>
